<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no"/>
    <title>车主服务</title>
    <link rel="stylesheet" href="css/service.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/WdatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="js/handle.js"></script>

    <script type="text/javascript">
        //var cardNo = "1212220000001307";
        var cardNo = "${cardNo}";// 卡号

        var halftransAmount = ""; // 半条的金额，用作链接传参
        var halftransOrderNo = ""; // 半条的订单号，用作链接传参

        var today = formatDate();
        var thisWeek = thisWeek();
        var startDate = [today[0] - 1, today[1], today[2]];
        // var startDate = [2017,1,1];
        var endDate = [today[0], today[1], today[2]];

        var chargeFlag = false;
        var chargeLoadingFlag = false;
        var chargeCurrentPage = 0;

        var rechargeFlag = false;
        var rechargeLoadingFlag = false;
        var rechargeCurrentPage = 0;

        var consumpFlag = false;
        var consumpLoadingFlag = false;
        var consumpCurrentPage = 0;

        var chargeStatusArray = ["已支付未到账", "支付成功"];
        var rechargeStatusArray = ["未处理", "已处理", "圈存异常"];
        var vehicleType = ["客车", "货车"];

        var getMoreText = [
            "<div class='getMore'>点击加载更多记录<br>数据存在延迟，仅供参考</div>",
            "<div class='noMore'>已无更多记录<br>数据存在延迟，仅供参考</div>"
        ];
        var nodataText = "<div class='nodata'><img src='img/nodata.png'><h3>查不到相关信息</h3><p>你是个遵守交规的好公民</p></div>";
        var nonetworkText = "<div class='nonetwork'><img src='img/nonetwork.png'><h3>网络似乎出了点问题</h3></div>"

        function getStartDate() {
            var y = $dp.cal.date.y;
            var m = $dp.cal.date.M;
            var d = $dp.cal.date.d;
            if (m.toString().length == 1) {
                m = "0" + m;
            }
            if (d.toString().length == 1) {
                d = "0" + d;
            }
            startDate = [y, m, d];
            $("#forstartDate").html(y + "年" + m + "月" + d + "日");
        }

        function getEndDate() {
            var y = $dp.cal.date.y;
            var m = $dp.cal.date.M;
            var d = $dp.cal.date.d;
            if (m.toString().length == 1) {
                m = "0" + m;
            }
            if (d.toString().length == 1) {
                d = "0" + d;
            }
            endDate = [y, m, d];
            $("#forendDate").html(y + "年" + m + "月" + d + "日");
        }

        function getWzInfoList() {
            console.log('step into getWzInfoList()')

            //如果正在请求，则结束
            if (rechargeLoadingFlag) {
                return false;
            }
            var data = {
                beginTime: startDate[0] + "-" + startDate[1] + "-" + startDate[2],
                endTime: endDate[0] + "-" + endDate[1] + "-" + endDate[2],
                pageNum: rechargeCurrentPage + 1,
                pageSize: 10,
                plate: '${plate}'
            };
            console.log(data);

            $(".loading").show();
            $(".rechargebox").off('click', ".getMore", getWzInfoList);
            rechargeLoadingFlag = true;
            $.ajax({
                url: $.httpRootPath() + 'rest/driver/wzList',
                type: 'GET',
                dataType: 'json',
                data: data,
                timeout: 15000,
                cache: false,
                success: function (r) {
                    console.log(r);
                    rechargeLoadingFlag = false;//请求完成，允许下一次请求；

                    $(".loading").hide();

                    if (r.code != "00") {
                        if ($(".rechargebox").is(':empty')) {
                            $(".rechargebox").append(nonetworkText);
                            return false;
                        }
                        errorToast(r.msg, 3);
                        return false;
                    }

                    rechargeFlag = true;
                    $(".rechargebox .getMore, .rechargebox .nodata, .rechargebox .nonetwork").remove();

                    if (r.data.length == 0) {
                        $(".rechargebox").append(nodataText);
                        return false;
                    }
                    for (var i = 0; i < r.data.length; i++) {

                        var item = r.data[i],
                            area = item.area,
                            archiveno = item.archiveno,
                            act = item.act,
                            wzcity = item.wzcity,
                            wzdate = item.date,
                            vehicleplate = item.vehiclePlate,
                            handled = item.handled,
                            wzresult = item.fen + "分" + item.money + "元",
                            id = item.id,
                            updatetime = item.updateTime;
                        var loadtypeText = "";
                        if (handled == 0) {
                            loadtypeText = "<span class = 'hanlde-btn sub-hanlde-btn' >未处理</span>";
                        } else if (handled == 1) {
                            loadtypeText = "<span class = ''>已处理</span>";
                        }
                        var rechargeItemText = "<div class='recharge_item' "
                            + "' data-handled='" + handled
                            + "' data-wzid='" + id
                            + "' data-archiveno='" + archiveno
                            + "' data-area='" + area
                            + "' data-act='" + act
                            + "' data-updatetime='" + updatetime
                            + "' data-wzcity='" + wzcity
                            + "' data-wzdate='" + wzdate
                            + "' data-vehicleplate='" + vehicleplate
                            + "' data-wzresult='" + wzresult + "'><h2 class='recharge_item_top'>" + wzdate + "<span>" + vehicleplate
                            + "</span></h2><h3 class='recharge_item_body abn-clr" + handled + "'>" + wzresult + " <span class='abn-clr1'>" + loadtypeText + "</span></h3></div>"
                        $(".rechargebox").append(rechargeItemText);
                    }
                    //没有下一页
                    if (r.pager.hasNextPage == false) {
                        console.log('hasNext = false');
                        $(".rechargebox").append(getMoreText[1]);
                        return false;
                    }
                    $(".rechargebox").on('click', ".getMore", getWzInfoList).append(getMoreText[0]);
                    rechargeCurrentPage = r.pager.pageNum;
                },
                error: function (e) {
                    console.log(e);
                    rechargeLoadingFlag = false;//请求完成，允许下一次请求；
                    $(".loading").hide();
                    if ($(".rechargebox").is(':empty')) {
                        $(".rechargebox").append(nonetworkText);
                        return false;
                    }
                    errorToast("", 3);
                }
            });

        }

        function getVehicleList() {
            console.log('step into getVehicleList()')
            //如果正在请求，则结束函数
            if (chargeLoadingFlag) {
                return false;
            }

            var data = {
                beginTime: startDate[0] + "-" + startDate[1] + "-" + startDate[2],
                endTime: endDate[0] + "-" + endDate[1] + "-" + endDate[2],
                pageNum: chargeCurrentPage + 1,
                pageSize: 10,
            };
            console.log(data);
            $(".loading").show();
            $(".chargebox").off('click', ".getMore", getVehicleList);

            chargeLoadingFlag = true;
            $.ajax({
                url: $.httpRootPath() + 'rest/driver/vehicleList',
                type: 'GET',
                dataType: 'json',
                data: data,
                timeout: 15000,
                cache: false,
                success: function (r) {
                    console.log(r);
                    $(".loading").hide();

                    chargeLoadingFlag = false;
                    if (r.code != "00") {
                        if ($(".chargebox").is(':empty')) {
                            $(".chargebox").append(nonetworkText);
                            return false;
                        }
                        errorToast(r.msg, 3);
                        return false;
                    }

                    chargeFlag = true;

                    //移除获取更多的按钮和无信息的提示语
                    $(".chargebox .getMore,.chargebox .nodata, .chargebox .nonetwork").remove();

                    //返回结果为空时
                    if (r.data.length == 0) {
                        $(".chargebox").append(nodataText);
                        return false;
                    }
                    for (var i = 0; i < r.data.length; i++) {
                        var item = r.data[i],
                            vid = item.id,
                            plate = item.plate,
                            register = item.register,
                            owner = item.owner,
                            wzinfo = item.wzFen + "分" + item.wzMoney + "元",
                            existwz = (item.wzFen + item.wzMoney) == 0 ? "1" : "2",
                            type = item.type,
                            vin = item.vin,
                            inspecttime = item.inspectTime,
                            updatetime = item.wzUpdateTime,
                            engineno = item.engineNo,
                            mobile = item.mobile;
                        var chargeItemText = "<div class='charge_item' "
                            + "' data-owner='" + owner
                            + "' data-vid='" + vid
                            + "' data-vin='" + vin
                            + "' data-plate='" + plate
                            + "' data-existwz='" + existwz
                            + "' data-engineno='" + engineno
                            + "' data-inspecttime='" + inspecttime
                            + "' data-updatetime='" + updatetime
                            + "' data-mobile='" + mobile
                            + "' data-wzinfo='" + wzinfo
                            + "'><h2 class='charge_item_top'>" + vehicleType[type - 1] + "<span>" + plate + "</span></h2><h3 class='charge_item_body'>" + register + "<span>" + wzinfo + "</span></h3></div></div>"
                        $(".chargebox").append(chargeItemText);
                    }
                    //没有下一页
                    if (r.pager.hasNextPage == false) {
                        console.log('hasNext = false');
                        $(".chargebox").append(getMoreText[1]);
                        return false;
                    }
                    $(".chargebox").on('click', ".getMore", getVehicleList).append(getMoreText[0]);
                    chargeCurrentPage = r.pager.pageNum;
                },
                error: function (e) {
                    console.log(e)
                    $(".loading").hide();
                    $(".chargebox").on('click', ".getMore", getVehicleList)
                    chargeLoadingFlag = false;

                    if ($(".chargebox").is(':empty')) {
                        console.log('$(".chargebox") is empty');
                        $(".chargebox").append(nonetworkText);
                        return false;
                    }
                    errorToast("", 3);
                }
            });

        }

        function getDriverList() {
            console.log('step into getDriverList()')

            //如果正在请求，则结束
            if (consumpLoadingFlag) {
                return false;
            }

            var data = {
                beginTime: startDate[0] + "-" + startDate[1] + "-" + startDate[2],
                endTime: endDate[0] + "-" + endDate[1] + "-" + endDate[2],
                pageNum: consumpCurrentPage + 1,
                pageSize: 10,
            };
            console.log(data);
            $(".loading").show();
            $(".consumpbox").off('click', ".getMore", getDriverList);
            consumpLoadingFlag = true;
            $.ajax({
                url: $.httpRootPath() + 'rest/driver/driverList',
                type: 'GET',
                dataType: 'json',
                data: data,
                timeout: 15000,
                cache: false,
                success: function (r) {
                    console.log(r);
                    $(".loading").hide();
                    consumpLoadingFlag = false;//请求完成，允许下一次请求；

                    if (r.code != "00") {
                        if ($(".consumpbox").is(':empty')) {
                            $(".consumpbox").append(nonetworkText);
                            return false;
                        }
                        errorToast(r.msg, 3);
                        return false;
                    }

                    consumpFlag = true;

                    $(".consumpbox .getMore, .consumpbox .nodata, .consumpbox .nonetwork").remove();
                    if (r.data.length == 0 || !r.data.length) {
                        $(".consumpbox").append(nodataText);
                        return false;
                    }


                    for (var i = 0; i < r.data.length; i++) {

                        var item = r.data[i],
                            name = item.name,
                            register = item.register,
                            classmodel = item.classModel,
                            licenseno = item.licenseNo,
                            score = item.score,
                            updatetime = item.wzUpdateTime,
                            mobile = item.mobile,
                            email = item.email;

                        var consumpItemText = "<div class='consump_item'" +
                            " data-name='" + name
                            + "' data-register='" + register
                            + "' data-classmodel='" + classmodel
                            + "' data-score='" + score
                            + "' data-licenseno='" + licenseno
                            + "' data-updatetime='" + updatetime
                            + "' data-mobile='" + mobile
                            + "' data-email='" + email
                            + "'><h2>" + name + "<span>已扣：" +
                            score + "分</span></h2><p>" + register + "<span><i>" +
                            classmodel + "</span></i></p></div>"
                        $(".consumpbox").append(consumpItemText);
                    }
                    //没有下一页
                    if (r.pager.hasNextPage == false) {
                        $(".consumpbox").append(getMoreText[1]);
                        return false;
                    }
                    $(".consumpbox").on('click', ".getMore", getDriverList).append(getMoreText[0]);
                    consumpCurrentPage = r.pager.pageNum;
                },
                error: function (e) {
                    console.log(e)
                    consumpLoadingFlag = false;//请求完成，允许下一次请求；
                    $(".loading").hide();

                    if ($(".consumpbox").is(':empty')) {
                        $(".consumpbox").append(nonetworkText);
                        return false;
                    }
                    errorToast("", 3);
                }
            });

        }

        // 遍历对象 将信息写入详细信息弹出框
        function writeToDom(obj) {
            if (!obj) {
                return
            }
            console.log(obj)
            for (key in obj) {
                $(key).html(obj[key])
            }
        }

        function toWzInfoListPage(ele, type) {
            var plate = $(ele).attr("data-plate");
            plate = plate === undefined ? "" : plate;
            window.location.href = "wxmp/driver/server?plate=" + plate;
        }

        function goToVehicleInfo(ele) {
            var id = $(ele).attr("data-vid");
            window.location.href = "wxmp/driver/vehicle/info?id=" + id;
        }

        function toShareWzInfoPage(ele, bol) {
            var id = $(ele).attr("data-wzid");
            var share = "0"
            if (bol == true) {
                share = "1";
            }
            window.location.href = "wxmp/driver/wz/info?id=" + id + '&share=' + share;
        }


        $(function () {
            var skin = "default";
            if (document.body.clientWidth <= 767) {
                skin = "forPhone";
            }
            window.onresize = function (e) {
                console.log(e)
                if (document.body.clientWidth <= 767) {
                    skin = "forPhone";
                } else {
                    skin = "default";
                }
            };
            //获取默认的起始、结束时间
            $("#startDate").val(startDate[0] + "年" + startDate[1] + "月" + startDate[2] + "日");
            $("#endDate").val(endDate[0] + "年" + endDate[1] + "月" + endDate[2] + "日");

            //绑定时间选择组件
            $("#forstartDate").html(startDate[0] + "年" + startDate[1] + "月" + startDate[2] + "日").on('click', function (e) {
                e.preventDefault();
                WdatePicker({
                    el: 'startDate',
                    dateFmt: 'yyyy年MM月dd日',
                    startDate: thisWeek[0] + '-' + thisWeek[1] + '-' + thisWeek[2],
                    firstDayOfWeek: 1,
                    onpicked: getStartDate,
                    minDate: '%y-%M-{%d-1095}',
                    maxDate: '#F{$dp.$D(\'endDate\')}',
                    isShowClear: false,
                    isShowOK: false
                    // skin: skin
                })
            }).on("click", function (e) {
                $("iframe").parent("div").addClass('dateArea');
                $(this).addClass('clr-blue').siblings('span').removeClass('clr-blue');

            });
            $("#forendDate").html(endDate[0] + "年" + endDate[1] + "月" + endDate[2] + "日").on('click', function (e) {
                e.preventDefault();
                WdatePicker({
                    el: 'endDate',
                    dateFmt: 'yyyy年MM月dd日',
                    firstDayOfWeek: 1,
                    onpicked: getEndDate,
                    minDate: "#F{$dp.$D(\'startDate\')}",
                    maxDate: '%y-%M-%d',
                    isShowClear: false,
                    isShowOK: false

                })
            }).on("click", function (e) {
                $("iframe").parent("div").addClass('dateArea');
                $(this).addClass('clr-blue').siblings('span').removeClass('clr-blue');
            });

            $(".search_btn").on('click', function (e) {
                e.preventDefault();
                $(".mask_layer").fadeIn(200);
                $("#forendDate, #forstartDate").removeClass('clr-blue');

            });
            $(".cancelChooseBtn").on('click', function (e) {
                e.preventDefault();
                $(".mask_layer").fadeOut(200);
            });

            //点击日期选择时重置所有信息和flag
            $(".chooseDateBtn").on('click', function (e) {
                e.preventDefault();

                chargeFlag = rechargeFlag = consumpFlag = false;
                chargeCurrentPage = rechargeCurrentPage = 0;

                $(".mask_layer").fadeOut(200);

                //重置所有list，返回到第一个菜单
                $(".chargebox, .rechargebox, .consumpbox").empty();

                var index = $(".menulist li span.menulist_selected").parent("li").index();
                console.log(index);
                $(".menulist li").eq(index).trigger('click');

            });

            // 隐藏详细信息
            $(".charge_detail_close,.recharge_detail_close,.consump_detail_close").on('click', function (e) {
                e.preventDefault();
                $(".recharge_detail, .charge_detail, .consump_detail, .detail_box").hide();
            });
            // 隐藏处理异常按钮
            $(".recharge_detail_close").click(function (e) {
                $(".hanlde-btn").addClass('none')
            });

            // 行驶证 弹出详细信息
            $(".chargebox").on('click', ".charge_item", function (e) {
                e.preventDefault();
                writeToDom({
                    ".charge_detail_plate": $(this).attr("data-plate"),
                    ".charge_detail_owner": $(this).attr("data-owner"),
                    ".charge_detail_mobile": $(this).attr("data-mobile"),
                    ".charge_detail_existwz": $(this).attr("data-existwz"),
                    ".charge_detail_vin": $(this).attr("data-vin"),
                    ".charge_detail_engineno": $(this).attr("data-engineno"),
                    ".charge_detail_inspecttime": $(this).attr("data-inspecttime"),
                    ".charge_detail_updatetime": $(this).attr("data-updatetime"),
                    ".charge_detail_wzinfo": $(this).attr("data-wzinfo")
                });
                $(".charge_vehicleId").attr("data-vid", $(this).attr("data-vid"));
                $(".charge_vehiclePlate").attr("data-plate", $(this).attr("data-plate"));

                if ($(this).attr("data-existwz") == 2 || 0 == 0) {
                    $('.hanlde-btn').removeClass('none');
                    halftransAmount = $(this).attr("data-plate");
                } else {
                    $('.hanlde-btn').addClass('none');
                }
                $(".detail_box>div").hide();
                $(".charge_detail, .detail_box").show();
            });
            // 违章信息 弹出详细信息
            $(".rechargebox").on('click', ".recharge_item", function (e) {
                e.preventDefault();
                writeToDom({
                    ".recharge_detail_handled": $(this).attr("data-handled"),
                    ".recharge_detail_area": $(this).attr("data-area"),
                    ".recharge_detail_act": $(this).attr("data-act"),
                    ".recharge_detail_wzcity": $(this).attr("data-wzcity"),
                    ".recharge_detail_archiveno": $(this).attr("data-archiveno"),
                    ".recharge_detail_wzdate": $(this).attr("data-wzdate"),
                    ".recharge_detail_vehicleplate": $(this).attr("data-vehicleplate"),
                    ".recharge_detail_wzresult": $(this).attr("data-wzresult"),
                    ".recharge_detail_updatetime": $(this).attr("data-updatetime")
                });
                $(".recharge_wzId").attr("data-wzid", $(this).attr("data-wzid"));

                // 圈存异常 显示处理按钮
                if ($(this).attr("data-loadstate") == 4 || 0 == 0) {
                    $('.hanlde-btn').removeClass('none');
                    halftransAmount = $(this).attr("data-loadamount") * 100;
                    halftransOrderNo = $(this).attr("data-orderno");
                }

                $(".detail_box>div").hide();
                $(".recharge_detail, .detail_box").show();
            });
            // 驾照证 弹出详细信息
            $(".consumpbox").on('click', ".consump_item", function (e) {
                e.preventDefault();
                writeToDom({
                    ".consump_detail_name": $(this).attr("data-name"),
                    ".consump_detail_register": $(this).attr("data-register"),
                    ".consump_detail_classmodel": $(this).attr("data-classmodel"),
                    ".consump_detail_licenseno": $(this).attr("data-licenseno"),
                    ".consump_detail_score": $(this).attr("data-score"),
                    ".consump_detail_updatetime": $(this).attr("data-updatetime"),
                    ".consump_detail_mobile": $(this).attr("data-mobile"),
                    ".consump_detail_email": $(this).attr("data-email")
                });
                if ($(this).attr("data-timeconsume")) {
                    writeToDom({
                        ".consump_timeconsume": $(this).attr("data-timeConsume") + "h",
                    });
                    $("timeconsume-box").show();

                } else {
                    $("timeconsume-box").hide();
                }
                $(".detail_box>div").hide();
                $(".consump_detail, .detail_box").show();
            });

            //点击更多时再次请求获取信息
            $(".chargebox").on('click', ".getMore", getVehicleList);
            $(".rechargebox").on('click', ".getMore", getWzInfoList);
            $(".consumpbox").on('click', ".getMore", getDriverList);

            //选择查询的目录
            $(".menulist li").on('click', function (e) {
                var index = $(this).index();
                $(this).find('span').addClass('menulist_selected');
                $(this).siblings('li').find('span').removeClass('menulist_selected');

                $(".body_box > .queryboxwrap").eq(index).siblings('.queryboxwrap').hide();
                $(".body_box > .queryboxwrap").eq(index).show();

                switch (index) {
                    case 0:
                        // 圈存
                        if (!rechargeFlag) {
                            getWzInfoList();
                        }
                        break;

                    case 1:
                        if (!chargeFlag) {
                            getVehicleList();
                        }
                        break;
                    case 2:
                        // 消费
                        if (!consumpFlag) {
                            getDriverList();
                        }
                        break;
                    default:
                        // statements_def
                        break;
                }
            });
            //页面加载时默认获取充值信息
            getWzInfoList();
        })


    </script>
</head>
<body class="ed">
<div class="wrap record_wrap">
    <div class="top_box">

        <div class="menubox">
            <ul class="menulist">
                <li>
                    <span class="menulist_selected">违章信息</span>
                </li>
                <li>
                    <span>行驶证</span>
                </li>
                <li>
                    <span>驾驶证</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="body_box">
        <div class="rechargebox queryboxwrap"></div>
        <div class="chargebox queryboxwrap" style="display:none"></div>
        <div class="consumpbox queryboxwrap" style="display:none"></div>
    </div>
    <div class="detail_box" style="display:none">
        <div class="charge_detail" style="display:none"><i class='charge_detail_close'></i>
            <h2 class="charge_detail_status"></h2>
            <h3 class="hasBorder">
                <span class="charge_detail_plate"></span>
            </h3>
            <table class="charge_detail_table">
                <tbody>
                <tr>
                    <td>车主名</td>
                    <td class="charge_detail_owner"></td>
                </tr>
                <tr>
                    <td>发动机号</td>
                    <td class='charge_detail_engineno'></td>
                </tr>
                <tr>
                    <td>车架号</td>
                    <td class='charge_detail_vin'></td>
                </tr>
                <tr>
                    <td>违章信息</td>
                    <td class='charge_detail_wzinfo'></td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td class='charge_detail_mobile'></td>
                </tr>
                <tr>
                    <td>年检时间</td>
                    <td class='charge_detail_inspecttime'></td>
                </tr>
                <tr>
                    <td>更新时间</td>
                    <td class='charge_detail_updatetime'></td>
                </tr>
                <tr>
                    <td onclick="goToVehicleInfo(this)" data-vid="" class="charge_vehicleId">
                        <span style="color: #00aeef">详情</span>
                    </td>
                    <td onclick="toWzInfoListPage(this,false)" data-vehplate="" class="charge_vehiclePlate">
                        <span style="color: red">违章信息</span>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
        <div class="recharge_detail" style="display:none"><i class='recharge_detail_close'></i>
            <h2 class="recharge_detail_archiveno"></h2>
            <h3 class="hasBorder">
                <span class="recharge_detail_vehicleplate"></span>
            </h3>
            <table class="recharge_detail_table">
                <tbody>
                <tr>
                    <td>违章城市</td>
                    <td class="recharge_detail_wzcity"></td>
                </tr>
                <tr>
                    <td>时间</td>
                    <td class='recharge_detail_wzdate'></td>
                </tr>
                <tr>
                    <td>违章地点</td>
                    <td class='recharge_detail_area'></td>
                </tr>
                <tr>
                    <td>违章行为</td>
                    <td class='recharge_detail_act'></td>
                </tr>
                <tr>
                    <td>更新时间</td>
                    <td class='recharge_detail_updatetime'></td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td onclick="toShareWzInfoPage(this,true)" class="recharge_wzId" data-wzid="">
                        <span style="color: red">SHARE</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="consump_detail">
            <i class='consump_detail_close'></i>
            <h3>
                <span class="consump_detail_score"></span>
                分
                <i>已扣</i>
            </h3>

            <table class="consump_detail_table">
                <tbody>
                <tr>
                    <td>姓名</td>
                    <td><span class="consump_detail_name"></span></td>
                </tr>
                <tr>
                    <td>准驾车型</td>
                    <td class='consump_detail_classmodel'></td>
                </tr>
                <tr>
                    <td>注册日期</td>
                    <td class='consump_detail_register'></td>
                </tr>
                <tr>
                    <td>证件号码</td>
                    <td><span class='consump_detail_licenseno'></span></td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td class='consump_detail_mobile'></td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td class='consump_detail_email'></td>
                </tr>
                <tr>
                    <td>更新时间</td>
                    <td class="consump_detail_updatetime"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="mask_layer " style="display:none">
    <div class="search_box">
        <p>
            <input id="startDate">
            <span id="forstartDate"></span>
            至
            <input id="endDate">
            <span id="forendDate"></span>
        </p>
        <h3>
            <span class='cancelChooseBtn'>取消</span>
            <span class="chooseDateBtn">确定</span>
        </h3>
    </div>
</div>
<img src="img/search2.png" class="search_btn">
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none"></div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
</body>
</html>